<template>
  <div class="touming">
    <div class="wrapper">
      <img class="tm" src="@/assets/images/tm.png" alt />
      <img id="gaizi" :style="{ opacity: opc }" class="gaizi" src="@/assets/images/gai.png" alt />
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      opc: 1
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $(window).on("scroll", () => {
        let otop = $("#gaizi").offset().top - $(window).scrollTop();
        let wheight = $(window).height();
        this.opc = (otop / wheight).toFixed(2);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.touming {
  margin-top: -60px;
  margin-bottom: 200px;
  .wrapper {
    margin: 0 auto;
    position: relative;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .tm {
      z-index: 8;
    }
    .gaizi {
      z-index: 9;
      margin-top: -112px;
    }
  }
}
</style>